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在 Codepen 上 常 汕 看 到 很 多 会 设计 义 懂 富 肿 旺 的 高 手 ， 用 SVG 书 出 很 深 完 鸭 图 条 人 后， 壮 
能 小 他 们 产生 可 爱 的 动 恒 ,我 一 直 很 好 奇 他 们 是 怎 压 实 作 的 ， 纺 如 得 很 困 共 ,好 像 得 对 
SVG 透 徽 了 解 ， 亚 且 目 己 书 出 那些 SVG 图 条 才 有 辩 法 实 作 动 旦 。 

但 其 焉 不 然 ， 今 大 器 来 分 序 一 个 简单 的 小 技巧 ; 让 你 在 短 短 十 分 甸 内 列 能 屠 一 个 静态 的 
SVG 图 和 双 活 跑 起 来 ! 


简单 看 个 成 品 ， 你 可 以 点 选 下 面 范 例 中 的 build 按钮 ,可 以 看 到 原本 静止 的 SVG 房子 动 了 
起 来 ! 





Icons made by Freepilk from www.flaticon.com 


一 步 ， 先 找到 你 喜 符 的 SVG 图 条 


如 果 你 跟 我 一 样 , 书 不 出 漂亮 的 图 案 或 con， 可 以 到 Flaticon、|lconfinder 或 icons8 等 网 
站 找 些 免费 的 svg icon 下 载 使 用 ( 注意 授权 即 可 ) 


vector icons grouped In packs 


The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats. 


Become a contributor 





Best packs of the month 密 ®0 


Religion 





肿 阵 子 到 美国 出 焉 败 现 他 们 好 像 很 流行 涓 板 车 ( scooter ) ， 那 束 到 Flaticon 上 找 个 类 似 的 
图 某 来 玩 玩 ! ( 一 开始 的 房屋 得 例 也 是 从 Haticon 取得 的 ) 


Icons made by Freepik from 
www.flaticon.com 


第 二 步 ， 分 析 一 下 你 的 SVG 长 什么 样子 


找到 喜 区 的 svg icon 和 合 ， 用 浏览 右 打 开 ， 接著 开 拘 devtool， 你 会 看 到 下 面 的 结果 : 








[x | Elements Network Memory Performance Sources Application Console Se 


<svg xmins="http://www.w3,.o0rg/28008/svg" id="Capa_1" enablie-background="new 6 0 
512.004 512.004" height="512”" viewBox="0 0 512.004 512.004" width="512"> - 
<path d="m175.669 463,803Cc-8.283 9-15-6,.716-15-15 0-53.743-43,723-97.467-97.467-~ 
97.467-14.622 0-28.673 3.153-41.762 9.371-7.483 3.555~16.432.371-19.986-7.112- 

3.555-7.482-.37-16.431 7.113-19.985 17.143-8.143 35.525-12.273 54.635-12.273 
79.286 8 127.467 57.182 127.467 127.467 8 8.283-6.714 14.999-15 14.999z" fill= 
"#c5ele6"></path> 
<path d="m442.768 321,.476c-63.827 2.945-113,414 51.886-120.563 112.327h-210.801C- 
8.285 0-15 6.716-15 15s6.715 15 15 15h224.932c8.285 0 15-6.716 15-15 0-52.162 
40.777-94.928 92.832-97.36 8.275-,.387 14.67-7.408 14,283-15.684- .387-8,.275-7.492- 
14.684-15.683-14.283z" fill="#008adf"></path> 
<path d="m442.768 321.476c-63.827 2.945-113,414 51.086-120.563 112,327h- 
66.204v30h80.335c8.285 @ 15-6,.716 15-15 0-52.162 40.777-94.928 92.832-97.36 
8.275-.387 14.67-7.408 14.283-15.684-.387-8.275-7.402-14.684-15.683-14.283z" 
fill="#0065a3"></path> 
<path d="m448.787 415.684c-7.721 0-14.279-5,923-14.932-13.7551-28.796-345.572C- 
1.291-15.484-11.852-26.275-20.521-26.275-8.283 8-15-6.716-15~-15s6,.717~15 15~ 
15c12.9 9 25.295 5.971 34.9 16.811 8.852 9.99 14.361 23.12 15.518 36,.972128.797 
345.573c.688 8.256-5.447 15.506-13,703 16.194-.425.035-.847.052-1,263.0852z" fill= 
"#8db9c4"></path> 
<Circte cx="63.203” cy="448.80@3" fill="#c5ele6" r="48.2"></circle> 
<path d="m63.283 512.002C-34.848 0-63.199-28.351-63,.199-63.199 8-34.849 28,.352-~ 
63.199 63,.199-63.199 34.85 @ 63,.201 28.35 63.201 63.199 9 34.848-28.352 63,199- 
63.201 63.199zm0-96.398c-18.306 0-33.199 14.893-33.199 33,199 @ 18.307 14.894 
33.199 33.199 33.199 18.307 0 33.201-14.893 33.201-33.1995-14.895-33.199-33.201~ 
33.199z" fill="#1d4659"></path> 
<Circte cx="448.803”" cy="448.803"” fill="#8db9c4" r="48.2"></circle> 

bp <g fill="#0e232C">..</g> 

</SVg> 





健 面 的 path 跟 circle 都 是 svg 的 DOM 元 件 ， 跟 字面 上 闽 思 一 栋 ， 珊 是 svg 图 案 内 的 
很 休 与 圆 形 。 


svg 的 path ， 基 本 上 融 是 一 右 串 的 svg mini language : 


<path d="M 16 25 
L 16 75 
L 66 75 
L 16 25 ”> 


十 面 程式 码 中 的 d 的 内 容 : M 代表 将 笔 移动 到 (10, 25) ，; 接著 上 画 一 休 线 到 (10, 75) ， 以 


此 类 推 。 详 细 介 绍 可 看 这 祷 - SVG Paths and D3.js。 


C++ 


透 过 devtool ' 我 们 可 以 知道 每 个 path 是 对 应 到 忌 面 上 的 哪个 部 分 : 


[x | Elements Network Memory Performance Sources Application Console Se 


<SVg xmlns="http://www.w3.0rg/2000/svg" id="Capa_1" enable-background="new @ 0 
512.004 512.004" height="512" viewBox="0 8 512.004 512.004" width="512"> 5 

<path d="m175.669 463,.803C-8.283 0-15-6,716-15-15 0@-53.743-43.723-97.467-97.467- 
97.467-14.622 0-28,673 3.153-41,.762 9.371-7.483 3,.555-16.432.371-19.986-7.112- 
3.555-7.482-,37-16.431 7.113-19.985 17.143-8.143 35.525-12.273 54.635-12.273 
70.286 9 127.467 57.182 127.467 127.467 0 8.283-6.714 14.999-15 14.999z"” fill= 
"#c5ele6"></path> 
<path d="m442.768 321.476C-63.027 2.945-113.414 51.086-120.563 112.327h-210.861C- 
8.285 0-15 6,.716-15 15s6.715 15 15 15h224.932c8.285 @ 15-6.716 15-15 8-52.162 
40.777-94.928 92.832-97.36 8.275~-,.387 14.67-7.408 14,.283-15.684-.387-8.275-7.402~ 
14.684-15.683-14.283z" fill="#008adf"></path> 
<path d="m442.768 321.476C-63.027 2.945-113.414 $11.086-120.563 112,327h- 
66.204v30h80.335c8,.285 8 15-6.716 15-15 0-52.162 4340.777-94.928 92,.832-97.36 
8.275-,.387 14.67-7.408 14,.283-15.684-,387-8.275-7.482-14.684-15.683-14,283z" 
fill="#0065a3"></path> 
<path d="m448.787 415,.604c-7.721 0-14.279-5,.923-14.932-13,755L-28.796-345 .572C- 
1.291-15.484-11.852-26.275-20,.521-26.275-8.,283 0-15-6.716-15-1556,717-15 15- 
15c12.9 0 25.295 5,971 34.9 16.811 8.852 9.99 14.361 23.12 15.518 36.972128.797 
345.573c.688 8.256-5,.447 15.506-13,.703 16.194-,425.835-.847.052-1.263.852z" fiill= 
"#8db9c4"></path> 
<circle cx="63.203" cy="448.893" fill="#c5ele6" r="48.2"></circle> 
<path d="m63.203 512.002C-34.848 8-63.199-28.351-63,199-63.199 8-34.849 28.352- 
63.199 63.199-63.199 34.85 0 63.201 28.35 63.201 63.199 0 34.848-28.352 63,.199- 
63.281 63.199zm8~96.398c-18,386 0-33.199 14.893-33.199 33.199 0 18.307 14.894 
33.199 33.199 33.199 18.307 8 33.201-14,.893 33,.201-33.1995-14,895-33.199-33,201- 
33 .199z” fill="#1d4659"></path> 
<Circte cx="448.803” cy="448.803" fitl="#8gdb9c4" r="48.2"></circle> 

p<g fill="#0e232C">..</9> 

</SVg> 





到 过 逮 大 概 融 富有 伯 方 铅 了 ， 既然 我 们 可 以 知 秆 每 个 元 件 对 应 到 图 某 上 的 哪 介 部 分 ， 我们 
就 能 多 人 针 革 想 要 套 上 动 书 的 DOM 元 件 来 操作 ! 


第 二 步 ， 好 用 的 动 忆 工具 - TimelineLite & TweenMax 


鲁 然 你 可 以 给 予 每 个 svg 内 的 DOM 元 件 一 个 独特 的 id ,或 是 class name， 然 合用 CSS 或 
JavaScript 来 自行 不 理 动 书 ,但 这 样 部 度 焉 是 搓 高 ,更 重 要 的 是 ， 就 没 闪 法 在 十 分 独 内 做 完 
XD 


所 以 我 们 得 借用 工具 ,Timeline(Lite|Max) 跟 TweenMax 是 知名 的 GreenSock Animation 
Platform ( 简称 GSAP ) 推出 的 套件 ， 从 名 稀 厌 可 以 狂 出 ,主要 是 提供 时 间 轴 与 定 问 支书 
的 APl: 


</-- index.html --> 
<div class="example"> 
<div class="example ball"></div> 
<h1 class="example title">Taiwan No.1!</h1> 


<button onclick="animateCircle()"> Build! </button> 
</div> 
<!-- JavaScript --> 
<script> 
// 使 用 TimeLineMqax 物件 
const tl = new TimelineMax(); 
// 利用 .set 设 定 氛 有 cLass name .exampLle titlLe 的 元 素 
// 将 其 scaLe 顷 小 成 6.2， 透明 度 设 备 6 
tl 
.Set(".example title", { 
scale: 6.2， 
autoAlpha: 6 
}) 
// 将 氛 有 cLass name .exampLe ball 的 元 素 
// scale 缩小 成 6.2 
.Set(".example ball", { 
scale: 0.2 
}) 
// tween 1: 在 1 秒 内 旋转 36@ 上 度 ,; 于 翻转 186 上 度 
// 接著 回复 scaLe 成 原始 大 小 ， 中间 以 ELastic.eqseIn 这 个 ease function 来 控制 动 
书 速 度 
.to(".example ball", 1, { 
rotationX: 366， 
rotationY: 180, 
scale: 1， 
ease: Elastic.easeIn.config(2,1) 
}) 
// tween 2: 跟 第 一 个 和 铺 问 支书 雷同 ， 只 是 这 次 是 控制 文字 ， 王 在 6.5 内 完成 
.to(".example title", 68.5, { 
autoAlpha: 1, 


scale: 1， 
ease: Back.easeOut.config(4) 
上 条 
</script> 


GSAP 其 全 提供 一 个 Ease Visualizer 让 你 可 以 看 看 每 种 Ease function 的 效果 ， 时 顺带 附 上 
程式 人 左 : 


GreenSock Ease Visualizer 


Bounce 


C LSLOM 
easeOut 


RUN 


mn mir +hea 人 | 1 i 
四 由 时 到 人 二 | UL 于 I 国 上 Ls L LL WE LU = 


TweenMax.to(graph, duration 2.5, { ease: Bounce.easeQut, y: -500 }); 





上 上述 短 短 的 程式 码 瑞 能 达到 如 下 效果 : 


7 


第 四 步 ， 结合 GSAP 工具 给 你 喜爱 的 SVG 


面 找 到 答案 : 官网 文件 、 论 坛 


在 一 开始 的 房屋 秀 例 中 ， 我 主要 使 用 的 是 TimelineMax 的 from 组 staggerFrom， 跟 朋 步 
县 内 的 秀 例 不 同 ， 和 过 两 个 APl 只 需要 设 定 女 始 值 ， 他 会 在 措 下 时间 内 将 锌 问 动 书 完 


tl.from('#House > rect:nth-child(24)', 1, {scaleX: 6，transformorigin: 
"center", ease: Power2.easeOut}) 


将 CSS Selector #House > rect:nth-child(24) 这 个 元 素 ，; 从 scaleX 局 0 开始 ， 以 
center( 中 心 ) 禹 变形 起 点 ,利用 Power2.easeOut 的 ease function ; 在 一 秒 内 回复 到 原始 状 
驴 ， 亚 纹 行 情 间 动 书 。 


.StaggerFrom(['#House > path:nth-child(34)", '#House > path:nth-child(32)"], 
0.8, {scaleY: 68, transformOrigin: "bottom", ease: Bounce.easeOut, 
stagger:0.2}, 6， "scenel+=0.5") 


与 from 雷同 ， 只 是 staggerFrom 可 以 一 次 放 入 多 但 CSS Selector ' 用 stagger 这 个 属性 
来 设 定 阵列 中 的 Selector 要 以 怎样 的 时 间 莽 出 吏 。 


| 
》 


羊 细 APl 参数 可 以 参考 官方 文件 


了 || 


接著 回 到 我 们 的 SVG“' 在 devtool 的 草 助 下 ,要 取出 svg 内 部 元 素 的 CSS Selector 非常 容 
易 , 在 DOM 元 件 上 按 右键 ， 选择 copy -> copy selector ， 就 能 直接 复 抽 到 该 元 件 的 CSS 
Selector : 


* <head>..</head> 
v<body translate="no"> 
v<sSvg id="Capa_1" enable-background="new 0 0 512.004 512.0084" 
wigdth="512"” xmlns="http://www.w3.0rg/2008/svg"> 
<path d="m175.669 463.803c-8.283 8-15-6.716-15-15 0@-53.743 
3.153-41.762 9.371-7.483 3,555-16.432.371-19,986-7.112-3.5 
35.525~12.273 54.635-12.273 70.286 0 127.467 57.182 127.46 
fill="#c5ele6"></path> 
<path d="m442.768 321.476Cc-63.027 2.945-113.414 51.886-120 
1556,.715 15 15 15h224.932c8.285 0 15-6.716 15~15 6-52.162 
7.408 14.283-15.684-.387-8.275-7.402-14.684-15.683-14.283z 
<path d="mA442.768 321.476C-63.027 2.945-113.414 51.886-120 
6.716 15-15 0-52.162 40.777-94.928 92.832~97.36 8.275-.387 
14.684-15.683~14.2832z" fiLL="#0065a3"></path> 
<path d="m448.787 415.604C-7.721 80-14,279-5.923-14,932-13, 
26.275~20.521~26.275-8.283 0-15-6.716-15-15s6,.717~15 15-15 
| Add attribute 36.972128.797 345.573Cc,688 8.256-5.447 
| Edit as HTML |db9c4 ></path> == $0 
cy="448.803" fill="#c5ele6" r="48.2">< 


Delete element |.002c-34.848 9-63.199-28.351-63.199-63 


148-28.352 63.199- 
Cutelement J99 33.199 33.199 


Copy element lath> 


Hide element t8db9c4" r="48.2"> 
Force state bp 
Break on bp Copy outerHTML 


上, Copy selector dutton> 
path 92.06x 405.86 Expand recursively CopY J wah 


Collapse children sts/common/stopExe 
Copy styles : FT 
Scroll into view yy JR ajax/Libs/gsap/2.1 
i py ajax/ libs/gsap/2.1 

Copy full XPath 


Store as global variable 








Build! 
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二 二 


现在 我 们 能 取得 svg 中 任何 部 分 的 CSS Selector， 也 知道 我 们 能 用 GSAP API 来 进行 补 间 动 
书 ， 现在 是 时候 将 其 结合 起 来 ! 


第 一 步 先 调整 一 下 基本 Layout ' 一 般 在 空白 Html 内 直接 放 入 svg 时 ， 图案 大 多 会 暑 靠 和 具 
面 左上 角 ， 因 角 svg 本 身 通 党 不 会 有 任何 关於 layout 的 CSS， 所 以 可 以 套用 个 margin: 6 
auto 将 其 置 中 ， 看 起 来 会 顺眼 一 些 ,你 也 能 额外 加 些 padding。 此 外 ， 筷 了 方便 测 写 动 书 
效果 ' 也 可 以 放 个 button 在 奥 面 上 ， 用 来 呼叫 你 的 动 曙 钢 式 : 





<!--html part--> 
<button onclick="animateBike()"> Build! </buttony> 
<l--css part--> 
<style> 
#Capa 1 { 
margin: 6 auto; 
display: block ; 
width: 256px; 
height: 166%; 


1 
</style> 


考 闭 我 们 使 用 TimelineMax 提供 的 staggerFrom 哆 了 式 ， 利 用 devtool 将 滑板 车 的 翰 子 部 分 
找 出 来 ， 禾 委 它 们 的 CSS Selector， 放 入 staggerFrom 玉 陈 参数 中 ,让 定 Xx 和 与 y 轴 的 
scale 都 从 0 开始 ,由 center 增长 ， 探 用 Bounce.easeout 的 ease function， 和 而 四 介 
Selector 癌 以 stagger: 6.2 的 属性 值 作 操 铺 癌 动 书 出 现 的 上 时间 委 : 


const tl = new TimelineMax(); 
tl 
.StaggerFrom(['#Capa 1 > g > path:nth-child(1)', '#Capa 1 > circle:nth- 
child(7)', '#Capa 1 > path:nth-child(6)', '#Capa 1 > circle:nth-child(5)"|], 
1, {scaleY:06, scaleX: 0, transformOrigin: "center", ease: 
Bounce.easeOut, stagger:0.2}) 


简单 络 行 程式 码 ， 殊 能 让 我 们 的 将 板 车 有 了 动量 ! 


第 五 步 ， 弘 挥 创意 ，; 将 整体 动 恒 完 成 


TimelineMax 所 提供 的 API 都 是 chainable 的 ， 你 可 以 想像 成 是 时 间 朝 一般， 动 书 跟 著 
chain 一 步 一 步 照 顺序 严 行 '， 和 而 staggerFrom 则 可 以 同时 让 多 伯 DOM 元 件 以 些微 时 间 拓 
的 顺序 砂 动 ' 男 外 也 能 设置 一 些 Flag 来 指定 要 等 到 哪 变 仙 动 乙 完 成 俊 ， 才 接续 其 他 动 曙 ， 
和 这些 细 节 曾 你 在 思考 要 如 何 “ 动 忌 “ 你 的 SVG 时， 册 去 GSAP 的 文件 绩 论 坛 查询 ， 相 信和 都 能 
找到 解答 。 


最 后 ， 强 擅自 己 的 创意 ,把 svg 的 各 个 部 分 都 祖上 勒 忆 ,搭配 GSAP 提供 的 文件 ,组合 各 
种 APl ,; 一 个 简单 的 作品 就 完成 了 : 


士 
7 日 


对 


只 然 这 个 小 扩 巧 旗 破 真 的 不 值钱 ， 最 困 闪 的 技术 都 安 给 了 GSAP 上 不 理 ,SVG 还 不 用 是 自己 
书 的 ， 但 加 在 目 己 的 部 活 格 或 是 放 在 投影 月 中 ,， 可 以 瞬间 让 画面 蝎 加 站 晶 ， 和 无聊 疫 事 拿 来 
娱乐 目 己 也 是 很 不 销 的 选择 ， 像 是 出 国旅 行 回来 有 时 委 睡 不 闭 ， 不 如 残 来 画 个 动 书 调 杖 身 
心 XD 

总 之， 我 目 己 览 得 对 有 趣 的 ， 和 希 侣 或 多 或 少 圣 访 到 和 这 篇 文章 的 人 有 吕 旬 助 。 
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